﻿    <meta charset="utf-8" content="" />
    <title>Media Central</title>
    <!-- External libraries and plugins -->
    <script type="text/javascript" src="metrodynamis/libraries/jquery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
    <!-- Metro Dynamis uses reset.css for the web -->
    <link rel="stylesheet" href="metrodynamis/libraries/reset/reset.css" />
    <!-- Metro Dynamis references -->
    <link rel="stylesheet" href="metrodynamis/md.core.css" />
    <script type="text/javascript" src="metrodynamis/md.core.js"></script>
    <!-- Metro Dynamis Helpers -->
    <link rel="Stylesheet" href="light-theme/jquery-ui-1.8.20.custom.css" />
    <link rel="Stylesheet" href="mediacentral.css" />
<div class="md-body">
    <header class="md-header md-header-main">
        <h1>
            Media Central
        </h1>
    </header>
    <nav class="md-nav md-nav-horizontal md-nav-main">
        <ul>
            <li><a onclick="show('#browse')">browse</a></li>
            <li><a onclick="show('#manage')">manage</a></li>
            <li><a onclick="show('#add')">add</a></li>
        </ul>
    </nav>
    <div class="md-content">
        <div id="browse" class="md-container">
            <section>
                <article>
                    <h2>
                        Browse videos here
                    </h2>
                    <div id="playlistpanel">
                        <h3>
                            Playlists
                        </h3>
                        <ul>
                            <li>
                                <div class="playlistpreview">
                                    Video Playlist Preview here
                                </div>
                            </li>
                            <li>
                                <div class="playlistpreview">
                                    Video Playlist Preview here
                                </div>
                            </li>
                            <li>
                                <div class="playlistpreview">
                                    Video Playlist Preview here
                                </div>
                            </li>
                            <li>
                                <div class="playlistpreview">
                                    Video Playlist Preview here
                                </div>
                            </li>
                            <li>
                                <div class="playlistpreview">
                                    Video Playlist Preview here
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="topvideopanel">
                        <h3>
                            Top Videos
                        </h3>
                        <div id="topvideosdisplay">
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                            <div class="topvideosingle">
                                Video preview goes here
                                <div style="width: 300px; height: 200px; background: blue">
                                    The video goes here.
                                    <p>
                                        Title
                                    </p>
                                    <p>
                                        Description
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </section>
        </div>
        <div id="add" class="md-container hidden">
            <section>
                <article>
                    <h2>
                        Add videos here
                    </h2>
                    <div id="add-video-panel">
                        <h3>
                            Upload Video
                        </h3>
                        <div id="upload-vid">
                            <p>
                                Upload video control here
                            </p>
                        </div>
                        <h3>
                            Add Video from YouTube
                        </h3>
                        <div id="add-vid-youtube">
                            <p>
                                Add video from YouTube here
                            </p>
                        </div>
                        <h3>
                            Add Playlist from YouTube
                        </h3>
                        <div id="add-playlist-youtube">
                            <p>
                                Add playlist from YouTube here
                            </p>
                        </div>
                    </div>
                </article>
            </section>
        </div>
        <div id="manage" class="md-container hidden">
            <section>
                <article>
                    <h2>
                        Manage videos here
                    </h2>
                    <div id="manage-video-panel">
                        <h3>
                            Edit/Delete Video
                        </h3>
                        <div id="manage-vids">
                            <p>
                                Edit or delete videos here
                            </p>
                        </div>
                        <h3>
                            Add/Edit/Delete Playlist
                        </h3>
                        <div id="manage-playlists">
                            <p>
                                Edit or delete playlists here
                            </p>
                        </div>
                    </div>
                </article>
            </section>
        </div>
    </div>
    <script type="text/javascript">
        function show(id) {
            $('.md-container').hide();
            $(id).fadeIn();
            MD.UI.recalculateAll(); // Refresh all viewports
        }
        $(document).ready(function () {
            $('#manage-video-panel').accordion();
            $('#add-video-panel').accordion();
        });
    </script>

</div>